<!-- login -->
<template>
  <a-row class='login'>
    <a-col
      :xs="20"
      :sm="8"
      :md="8"
      :lg="6"
      :xl="6"
      :xxl="4"
    >
      <div class="loginCard">
        <div class="loginContent">
          <a-button
            type="primary"
            icon="thunderbolt"
            style="cursor: pointer;margin:5px auto 5px"
            @click="showUpload = !showUpload"
          >
            {{showUpload?'快速注册':'返回'}}
          </a-button>
          <img
            v-show="showUpload"
            class="logo"
            src="../../../public/logo.png"
            alt="logo"
          >
          <a-upload
            v-show="!showUpload"
            name="avatar"
            list-type="picture-card"
            class="avatar-uploader uploader"
            :show-upload-list="false"
            :customRequest="customRequest"
            :before-upload="beforeUpload"
            @change="handleChange"
          >
            <img
              class="avatar"
              v-if="imageUrl"
              :src="imageUrl"
              alt="avatar"
            />
            <div v-else>
              <a-icon :type="loading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">
                Upload
              </div>
            </div>
          </a-upload>
          <a-form-model
            :model="formInline"
            @submit="handleSubmit"
            @submit.native.prevent
          >
            <a-form-model-item>
              <a-input
                v-model="formInline.user"
                placeholder="Username"
              >
                <a-icon
                  slot="prefix"
                  type="user"
                  style="color:rgba(0,0,0,.25)"
                />
              </a-input>
            </a-form-model-item>
            <a-form-model-item>
              <a-input
                v-model="formInline.password"
                type="password"
                placeholder="Password"
              >
                <a-icon
                  slot="prefix"
                  type="lock"
                  style="color:rgba(0,0,0,.25)"
                />
              </a-input>
            </a-form-model-item>
            <a-form-model-item v-show="!showUpload">
              <a-input
                v-model="formInline.rePassword"
                type="password"
                placeholder="rePassword"
              >
                <a-icon
                  slot="prefix"
                  type="lock"
                  style="color:rgba(0,0,0,.25)"
                />
              </a-input>
            </a-form-model-item>
            <a-form-model-item>
              <a-button
                style="width:45%"
                type="primary"
                html-type="submit"
                :disabled="!showUpload || formInline.user === '' || formInline.password === ''"
              >
                Log in
              </a-button>
              <a-button
                style="width:45%;margin-left:10%"
                type="primary"
                @click="loginUpSubmit"
                :disabled="showUpload || formInline.user === '' || formInline.password === ''"
              >
                Log up
              </a-button>
            </a-form-model-item>
          </a-form-model>
          <div class="oauth">
            <a href="https://github.com/login/oauth/authorize?
  client_id=fbf62ccd8643da3d4e93&
  redirect_uri=http://www.keledd.cn:3000/oauth/redirect">
              <a-icon type="github" /></a>
            <a href="https://api.weibo.com/oauth2/authorize?client_id=3877246602&redirect_uri=http://www.keledd.cn:3000/oauth/weibo">
              <a-icon type="weibo-square" /></a>
          </div>
        </div>
      </div>
    </a-col>
  </a-row>
</template>

<script>
function getBase64 (img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}
import * as api from "@/API/require"
export default {
  components: {},
  data () {
    return {
      loading: false,
      imageUrl: '',
      showUpload: true,
      formInline: {
        user: '',
        password: '',
        rePassword: ''
      },
      formData: new FormData()
    };
  },
  computed: {},
  watch: {},
  methods: {
    handleChange (info) {
      console.log(info)
      //   if (info.file.status === 'uploading') {
      //     this.loading = true;
      //     return;
      //   }
      //   if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, imageUrl => {
        this.imageUrl = imageUrl;
        this.loading = false;
      });
      //   }
    },
    beforeUpload (file) {
      console.log(file)
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        this.$message.error('You can only upload JPEG and PNG file!');
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!');
      }
      return isJpgOrPng && isLt2M;
    },
    // 登录
    handleSubmit () {
      api.login({
        name: this.formInline.user,
        password: this.formInline.password
      }).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.message)
          localStorage.setItem('userInfo', JSON.stringify(res.data.userInfo))
          this.$router.push('/home');
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    customRequest () {
      // this.formData = null
      // this.formData.append('avator',file.file)
    },
    // 注册
    loginUpSubmit () {
      api.signup({
        name: this.formInline.user,
        password: this.formInline.password,
        repeatpass: this.formInline.rePassword,
        avator: this.imageUrl
      }).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.message)
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
  },
  created () {

  },
  mounted () {

  },
}
</script>
<style lang="less" scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-image: url(../../../public/timg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: bottom;
  .loginCard {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    .loginContent {
      width: 80%;
      height: 80%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .logo {
        width: 92px;
        margin-bottom: 20px;
      }
      .uploader {
        display: flex;
        justify-content: center;
        .avatar {
          width: 100%;
        }
      }
    }
  }
}
.oauth {
  display: flex;
  margin: 0 auto 10px;
  width: 100%;
  font-size: 1.3rem;
  justify-content: space-around;
}
</style>